<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="88px">
         <el-form-item label="地区类型：" prop="type">
          <el-select v-model="queryParams.nature" placeholder="请选择地区类型" clearable size="small">
            <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
         </el-form-item>
         <el-form-item label="园所名称：" prop="schoolCode">
            <el-select v-model="queryParams.schoolCode" @change="selectSchool" clearable
            filterable placeholder="请选择园所">
                          <el-option
                            v-for="item in schoolList"
                            :key="item.code"
                            :label="item.title"
                            :value="item.code">
                          </el-option>
                        </el-select>
            </el-form-item>
          <el-form-item label="学期" prop="semId">
            <el-select v-model="queryParams.semId" filterable clearable placeholder="请选择学期">
              <el-option
                v-for="item in semsterList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
                size="small">
              </el-option>
            </el-select>
          </el-form-item>
        <el-form-item label="年级" prop="year">
            <el-select v-model="queryParams.year" :disabled='isYearDisabled' clearable placeholder="请选择年级"   @change="getClazzList">
                <el-option
                  v-for="dict in dict.type.year_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                >
                </el-option>
            </el-select>
       </el-form-item>
       <el-form-item label="班级" prop="classId">
          <el-select v-model="queryParams.classId" :disabled='isClassDisabled' clearable   placeholder="请选择班级">
          <el-option v-for="item in classList" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
       </el-form-item>
         <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="angleList" >
              <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
              <el-table-column  align="center" label="园所名称"  prop="schoolName" width="150"></el-table-column>
              <el-table-column  align="center" label="地区类型"  prop="nature"  :formatter="schoolNatureFormat"></el-table-column>
              <el-table-column  align="center" v-for="(item,index) in cornerTypeOptions" :key="index" :label="item.dictLabel"  :prop="item.type" min-width="90px"></el-table-column>
              <!-- <el-table-column  align="center" label="区角2"  prop="attendance4"></el-table-column>
              <el-table-column  align="center" label="区角3" prop="attendance3"></el-table-column>
              <el-table-column  align="center" label="区角4"  prop="attendancePro"></el-table-column> -->
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handleView(scope.row)"
                  >查看</el-button>
                </template>
              </el-table-column>
           </el-table>
           <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
     <el-dialog title="区角详情" :visible.sync="open" width="950px" append-to-body>


      <!-- <el-form :model="queryParams2" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
     <el-form-item label="学期" prop="semId">
        <el-select v-model="queryParams2.semId" filterable clearable placeholder="请选择学期">
          <el-option
            v-for="item in semsterList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
            size="small">
          </el-option>
        </el-select>
      </el-form-item>
     <el-form-item label="年级" prop="year">
         <el-select v-model="queryParams2.year" clearable placeholder="请选择年级"   @change="getClazzList">
            <el-option
              v-for="dict in dict.type.year_type"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            >
            </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="班级" prop="classId">
          <el-select v-model="queryParams2.classId" :disabled='isClassDisabled' clearable   placeholder="请选择班级">
          <el-option v-for="item in classList" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
       </el-form-item>

      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery2">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery2">重置</el-button>
      </el-form-item>
    </el-form> -->

        <el-table v-loading="loading" :data="detailList" >
              <el-table-column type="index" align="center" label="序号" :index="customeIndex1" width="80"></el-table-column>
              <el-table-column  align="center" label="区角类型"  prop="cornerType" :formatter="cornerTypeFormat"></el-table-column>
              <el-table-column  align="center" label="区角名称"  prop="cornerName" ></el-table-column>
              <el-table-column  align="center" label="区角位置"  prop="cornerPosition"></el-table-column>
              <el-table-column  align="center" label="兴趣标签"  prop="cornerTag"></el-table-column>
           </el-table>
           <pagination v-show="detailtotal>0" :total="detailtotal" :page.sync="detailParams.pageNum" :limit.sync="detailParams.pageSize"
             @pagination="getcornerDetail" />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="classOk">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script>

import moment from "moment";
import { schoolCorner,cornerDetail } from "@/api/qu/qyqjfacility";
import { selectClazz } from "@/api/base/clazz";
import { selectSemster} from "@/api/base/semster";
import { clazzList,schoolList } from "@/api/qu/qyyerygk";
export default {
  name: "ysqjdb",
  dicts: ['year_type','bxmanage_status'],
  data() {
    return {
        queryParams:{
            schoolName:'',
            nature:'',
            pageNum: 1,
            pageSize: 10,
        },
        queryParams2: {
        pageNum: 1,
        pageSize: 10,
        taskId: null,
        specId: null,
        courseId: null,
        classId: null,
        teacherId: null,
        roomId: null,
        week: null,
        sectionId: null
      },
      showSearch: true,
      // 表单参数
      form: {},
      // 班级表格数据
      clazzList: [],
      schoolList:[],
      yearList:[],
        // 学期数据
      semsterList: [],
        schoolNatureOptions:[],
        angleList:[
            {schoolName:'园所1',value:'50'},
        ],
        total:0,
        loading:false,
        open:false,
        detailList:[],
        detailParams:{
          pageNum: 1,
          pageSize: 10,
        },
        detailtotal:0,
        schoolCode:'',
        cornerTypeOptions:[],
        classList:[],
        isClassDisabled:true, //班级disabled
        isYearDisabled:true,//年级disabled
    };
  },
  created() {
    selectSemster({'status':1}).then(response => {
      this.semsterList = response.rows;
    });
    this.getConfigKey("sys.time.start").then(response => {
      var st = parseInt(response.msg);
      var dt = new Date();
      while(st<=dt.getFullYear()+1){
        this.yearList.push({value: st,label: st});
        st ++;
      }
    });
       this.getDicts("school_nature").then(response => {
          this.schoolNatureOptions = response.data;
       });
       this.getDicts("corner_type").then(response => {
          this.cornerTypeOptions = response.data.map((item,index)=>{
              return{
                ...item,
                type:'type'+index
              }
          })
        });
       this.getList()
       this.getschoolList()
  },
  mounted(){
   },
  methods: {
      //获取学校列表
    async getschoolList(){
         const data = await schoolList();
         this.schoolList=data.rows;
    },
    selectSchool(){
        this.queryParams.classId = null
        this.isClassDisabled = true
        this.isYearDisabled = false
        this.queryParams.year = null
      // this.getClazzList()
    },
    handleQuery2(){
      this.detailParams.pageNum = 1;
      this.getcornerDetail();
    },
    resetQuery2(){
      this.resetForm("queryForm");
      this.handleQuery2();
      this.isClassDisabled = true
      this.isYearDisabled = true
    },
    //clazzList 获取班级列表
    async  getClazzList(){
        this.queryParams.classId = null
        this.isClassDisabled = true
            try {
               const obj ={
                 schoolCode:this.queryParams.schoolCode,
                 year:this.queryParams.year
               }
              const data=  await  clazzList(obj)
              this.classList=data.rows;
              if(this.classList.length){
                this.isClassDisabled = false
              }
              // console.log(data);
            } catch (error) {
              console.log(error);
            }
    },
   async getList(){
        try {
            const obj ={
                nature:this.queryParams.nature,
                schoolCode:this.queryParams.schoolCode,
                pageNum:this.queryParams.pageNum,
                pageSize:this.queryParams.pageSize,
                semId:this.queryParams.semId,
                year:this.queryParams.year,
                classId:this.queryParams.classId
            }
           const data = await schoolCorner(obj);
           this.angleList=data.rows;
           this.total=data.total;
        } catch (error) {
            console.log(error);
        }
    },
    //详情数据
    async getcornerDetail(){
        try {
            const obj ={
                schoolCode:this.schoolCode,
                pageNum:this.detailParams.pageNum,
                pageSize:this.detailParams.pageSize,
                semId: this.queryParams2.semId,
                year: this.queryParams2.year,
                classId: this.queryParams2.classId
            }
           const data = await cornerDetail(obj);
           this.detailList=data.rows;
           this.detailtotal=data.total;
        } catch (error) {
            console.log(error);
        }
    },
    handleInput(val){
        let regtszf = /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/g // 特殊字符正则
        let regkg = /[ ]/g// 空格正则
        this.queryParams.schoolName = val.replace(regtszf, '').replace(regkg, '')
         },
     /** 搜索按钮操作 */
     handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams= {
        nature:'',
        pageNum: 1,
        pageSize: 10,
        schoolCode:null,
        semId:null,
        year:null,
        classId:null
      }
      this.isClassDisabled = true
      this.isYearDisabled = true
      this.resetForm("queryForm");
      this.handleQuery();
      // this.getFormclassList();
    },
    handleView(row){
        this.schoolCode=row.schoolCode;
        this.getcornerDetail()
        this.open=true;
    },
    classOk(){
        this.open=false;
        this.detailParams={
             pageNum: 1,
             pageSize: 10,
        }
       },
    //地区类型字典翻译
    schoolNatureFormat(row, column) {
      return this.selectDictLabel(this.schoolNatureOptions, row.nature);
    },
      // 区角类型字典翻译
      cornerTypeFormat(row) {
            return this.selectDictLabel(this.cornerTypeOptions, row.cornerType);
         },
         // 序号
    customeIndex(index){
         return index+1+(this.queryParams.pageNum-1)*this.queryParams.pageSize
     },
         // 序号
     customeIndex1(index){
         return index+1+(this.detailParams.pageNum-1)*this.detailParams.pageSize
     },

  }
};
</script>

<style lang="scss" scoped>
.chartDom{
    width:90%;
    height:500px;
}
</style>
